import axios, { type AxiosResponse } from "axios";
import { ElMessage, ElMessageBox } from "element-plus"; // 引入了Message组件
import pinia from "@/stores/index"; // 引入仓库
import { useUserInfoStore } from "../stores/userInfo"; // 引入了用户仓库模块

/* 定义response对象的data接口 */
interface ResponseData<T> {
  code: number;
  data: T;
  message: string;
}

// 配置新建一个 axios 实例
// import.meta.env.VITE_API_URL是什么？从哪来？在哪里配置？
// VITE_API_URL的字符串只有在.env.development以及.env.production中才有
// .env.development以及.env.production是配置文件，而js中如果想调用配置文件的值，需要利用import.meta.env.XXX
const service = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  // baseURL: "/app-dev",
  timeout: 50000,
});

// 添加请求拦截器
service.interceptors.request.use((config) => {
  const userInfoStore = useUserInfoStore(pinia); // 千万注意在进行 useUserInfoStore的时候一定要传递pinia这个实例的参数
  // 为什么一定要传pinia这个实例的参数，我们之前在组件中进行调用的时候明明什么都没有传递
  // 位置的问题：我们之前进行仓库的实例化是在组件中操作
  // 但是我们现在的位置是在ts程序文件中，有组件的实例吗？能否进行隐式原型链的查找？不能
  // config里后续应该考虑的是token以及content-type等内容

  // 因为我们之前登录的时候有将token放到state中，现在操作的就是state，而不是localStorage
  if (userInfoStore.token) {
    // 设置config.headers['token']
    // (<any>config.headers)["token"] = userInfoStore.token;
    config.headers!.token = userInfoStore.token;
  }
  return config;
});

// 添加响应拦截器
service.interceptors.response.use(
  /* 约束一下response */
  async (response: AxiosResponse<ResponseData<any>>) => {
    // 对响应数据做点什么
    const res = response.data;
    // code是企业code码
    if (res.code !== 20000 && res.code !== 200) {
      /* 成功数据的code值为20000/200 */
      // 统一的错误提示
      ElMessage({
        message:
          (typeof res.data == "string" && res.data) || res.message || "Error",
        type: "error",
        duration: 5 * 1000,
      });

      // `token` 过期或者账号已在别处登录
      // status是http状态码
      if (response.status === 401) {
        const storeUserInfo = useUserInfoStore(pinia);
        await storeUserInfo.reset();
        window.location.href = "/"; // 去登录页
        ElMessageBox.alert("你已被登出，请重新登录", "提示", {})
          .then(() => {})
          .catch(() => {});
      }
      return Promise.reject(service.interceptors.response);
    } else {
      return res.data; /* 返回成功响应数据中的data属性数据 */
    }
  },
  (error) => {
    // 对响应错误做点什么
    if (error.message.indexOf("timeout") != -1) {
      ElMessage.error("网络超时");
    } else if (error.message == "Network Error") {
      ElMessage.error("网络连接错误");
    } else {
      if (error.response.data) ElMessage.error(error.response.statusText);
      else ElMessage.error("接口路径找不到");
    }
    return Promise.reject(error);
  }
);

export default service;
